const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
const resolveApp = require("./paths");

module.exports = merge(commonConfig, {
  output: {
    filename: "js/build.js",
    path: resolveApp('./dist'),
  },
  mode: 'development',
  watch: false,
  devtool: 'cheap-module-source-map',
  devServer: {
    open: false, // 自动打开浏览器
    compress: true, // 启动 gzip 压缩
    hot: true,  // 热更新 默认 开启
    port: 3000
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,  // 向前找一个，在用 postcss 处理一次
            }
          },
          'postcss-loader'
        ],
      },
      {
        test: /.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,  // 向前找一个，在用 postcss 处理一次
            }
          },
          'less-loader',
          'postcss-loader'
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack 搭建项目",
      template: 'public/index.html',
      cache: true
    }),
    // https://webpack.docschina.org/plugins/eslint-webpack-plugin/
    new ESLintPlugin()
  ],

});
